import Vue from 'vue';
import MessageBox from './MessageBox.vue';
import TipBox from './TipBox.vue';

const Message = Vue.extend(MessageBox);
const Tip = Vue.extend(TipBox); // 根据单文件组件构建新的组件构造器

const showMsg = function(info,type="success",time=4000){
    let message = new Message(); // 根据构造器创建实例
    message.msg = info; // 修改实例数据仓库中的变量
    message.type = type;
    message.time = time;
    message.$mount(); // 强制执行 实例创建，但不再页面中显示，以虚拟DOM的方式存在于内存中
    document.body.appendChild(message.$el); // 将组件的虚拟DOM 写入的页面中
}

const showTip = function(info,time=4000) {
    let tip = new Tip(); // 根据构造器创建实例
    tip.tip = info; // 修改实例数据仓库中的变量
    tip.time = time;
    tip.$mount(); // 强制执行 实例创建，但不再页面中显示，以虚拟DOM的方式存在于内存中
    document.body.appendChild(tip.$el); // 将组件的虚拟DOM 写入的页面中
}

export default {
    install(Vue) {
        Vue.prototype.$showTip = showTip; // 在Vue的原型上定义全局的实例方法，以方便组件的直接调用
        Vue.prototype.$showMsg = showMsg; // 在Vue的原型上定义全局的实例方法，以方便组件的直接调用
    },
    showMsg,
    showTip
}